<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    {{ msg }}
    <a-input v-model:value="msg"></a-input>
    <div
      style="width: 40px; height: 40px; cursor: pointer"
      :style="{ backgroundColor: sketchBgColor }"
      @click="changSketch"
    ></div>
    <Sketch
      v-model="colors"
      :show="showSketch"
      @changButton="changSketchButton"
    ></Sketch>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
import { Sketch } from "@ans1998/vue3-color";

export default defineComponent({
  name: "HomeView",
  components: {
    HelloWorld,
    Sketch,
  },
  setup() {
    const msg = ref("msg");
    const colors = ref("");
    const sketchBgColor = ref("#222");
    const showSketch = ref(true);
    const changSketchButton = (item: {
      isOk: boolean;
      activeColor: string;
    }) => {
      showSketch.value = false;
      console.log(item);
      if (item.isOk) {
        console.log("确定");
        sketchBgColor.value = item.activeColor;
      } else {
        console.log("取消");
      }
    };

    const changSketch = () => {
      showSketch.value = true;
    };
    return {
      msg,
      changSketchButton,
      colors,
      sketchBgColor,
      showSketch,changSketch

    };
  },
});
</script>
<style lang="less">
.home {
  background-color: @primary-color;
}
</style>
